页面路由切换过渡效果：Transition 淡入淡出动画
概述
在管理后台的动态组件（RouterView）外层包裹 <Transition> 组件，实现页面切换时的淡入淡出过渡效果。本节讲解 Vue 3 Transition 与动态组件的配合方式，以及 CSS 过渡类名的编写。
Transition 包裹 RouterView
模板结构
<!-- layouts/default.vue -->
<template>
<div class="app-container">
<Sidebar />
<div class="main-content">
<Header />
<!-- Transition 包裹动态组件 -->
<Transition name="fade" mode="out-in">
<RouterView v-slot="{ Component }">
<component :is="Component" />
</RouterView>
</Transition>
</div>
</div>
</template>
vue
关键点说明
<RouterView>通过v-slot="{ Component }"获取当前路由组件<component :is="Component" />渲染动态组件<Transition name="fade">定义过渡动画名称mode="out-in"确保旧组件先离开，新组件再进入
CSS 过渡样式
创建过渡样式文件
// src/assets/styles/transition.scss
/* 淡入淡出过渡 */
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
scss
引入样式文件
// src/main.ts
import './assets/styles/main.scss'
// main.scss
@import './transition.scss';
typescript
过渡状态详解
页面 A（当前） 页面 B（即将进入）
┌─────────────┐ ┌─────────────┐
│ opacity: 1 │ ── leave ──→ │ opacity: 0 │
│ │ active │ │
│ opacity: 0 │ ── leave-to ──→ │ opacity: 1 │
└─────────────┘ └─────────────┘
enter-from → enter-to
时间线:
├──── 0.3s ────┤
leave active enter active
text
CSS 类名与状态映射
| 类名 | 对应状态 | opacity 值 |
|---|---|---|
fade-enter-from | 进入开始 | 0 |
fade-enter-active | 进入过渡中 | 0 → 1 |
fade-enter-to | 进入结束 | 1（默认值，可省略） |
fade-leave-from | 离开开始 | 1（默认值，可省略） |
fade-leave-active | 离开过渡中 | 1 → 0 |
fade-leave-to | 离开结束 | 0 |
为什么只需定义两个类
- DOM 默认
opacity为 1，因此enter-to和leave-from不需要单独设置 - 只需定义
enter-from（opacity: 0）和leave-to（opacity: 0） enter-active和leave-active定义过渡参数（duration、easing）
更多过渡效果变体
// 滑动过渡
.slide-enter-active,
.slide-leave-active {
transition: all 0.3s ease-out;
}
.slide-enter-from {
transform: translateX(20px);
opacity: 0;
}
.slide-leave-to {
transform: translateX(-20px);
opacity: 0;
}
// 缩放过渡
.scale-enter-active,
.scale-leave-active {
transition: all 0.3s ease;
}
.scale-enter-from,
.scale-leave-to {
transform: scale(0.95);
opacity: 0;
}
scss
实践要点
- 使用
mode="out-in"避免新旧组件同时存在导致的布局抖动 - 过渡时间建议 0.2s-0.3s，过短感知不明显，过长影响操作流畅度
easing推荐使用ease或ease-out，让动画收尾更自然- 过渡样式独立为单独的 SCSS 文件，便于统一管理和复用
↑